Est-il possible de basculer la visibilité d'un élément, en utilisant les fonctions .hide (), .show () ou .toggle ()?
Comment testeriez-vous si un élément est visible ou masqué?
2020-12-07 21:53:11
1
2
Prochain
Puisque la question se réfère à un seul élément, ce code pourrait être plus approprié:
// Vérifie l'affichage du contenu CSS: [aucun | bloc], ignore la visibilité: [vrai | faux]
$ (élément) .is (": visible");
// La même chose fonctionne avec hidden
$ (élément) .is (": caché");
C'est la même chose que la suggestion de twernt, mais appliquée à un seul élément; et il correspond à l'algorithme recommandé dans la FAQ jQuery.
Nous utilisons is () de jQuery pour vérifier l'élément sélectionné avec un autre élément, un sélecteur ou n'importe quel objet jQuery. Cette méthode parcourt les éléments DOM pour trouver une correspondance, qui satisfait le paramètre passé. Il retournera true s'il y a une correspondance, sinon retourne false.
|
Vous pouvez utiliser le sélecteur masqué:
// Correspond à tous les éléments masqués
$ ('élément: caché')
Et le sélecteur visible:
// Correspond à tous les éléments visibles
$ ('élément: visible')
|
if ($ (élément) .css ('affichage') == 'aucun' || $ (élément) .css ("visibilité") == "caché") {
// 'élément' est masqué
}
La méthode ci-dessus ne prend pas en compte la visibilité du parent. Pour considérer également le parent, vous devez utiliser .is (": hidden") ou .is (": visible").
Par exemple,
Div2
La méthode ci-dessus considérera div2 visible tandis que: visible non. Mais ce qui précède peut être utile dans de nombreux cas, en particulier lorsque vous devez trouver s'il y a des div d'erreur visibles dans le parent masqué car dans de telles conditions: visible ne fonctionnera pas.
|
Aucune de ces réponses ne répond à ce que je comprends être la question, c'est-à-dire ce que je recherchais, "Comment gérer les éléments qui ont une visibilité: masqué?". Ni: visible ni: hidden ne géreront cela, car ils recherchent tous les deux un affichage selon la documentation. Autant que je sache, il n'y a pas de sélecteur pour gérer la visibilité CSS. Voici comment je l'ai résolu (sélecteurs jQuery standard, il peut y avoir une syntaxe plus condensée):
$ (". item"). each (function () {
if ($ (this) .css ("visibilité") == "hidden") {
// gérer l'état non visible
} autre {
// gérer l'état visible
}
});
|
De Comment déterminer l'état d'un élément basculé?
Vous pouvez déterminer si un élément est réduit ou non en utilisant les sélecteurs: visible et: hidden.
var isVisible = $ ('# myDiv'). is (': visible');
var isHidden = $ ('# myDiv'). is (': hidden');
Si vous agissez simplement sur un élément en fonction de sa visibilité, vous pouvez simplement inclure: visible ou: hidden dans l'expression du sélecteur. Par exemple:
$ ('# myDiv: visible'). animate ({left: '+ = 200px'}, 'slow');
|
Souvent, lorsque vous vérifiez si quelque chose est visible ou non, vous allez immédiatement de l'avant et en faire autre chose. Le chaînage jQuery rend cela facile.
Donc, si vous avez un sélecteur et que vous souhaitez effectuer une action sur celui-ci uniquement s'il est visible ou masqué, vous pouvez utiliser filter (": visible") ou filter (": hidden") suivi en le chaînant avec l'action que vous souhaitez prendre.
Donc, au lieu d'une instruction if, comme ceci:
if ($ ('# btnUpdate'). is (": visible"))
{
$ ('# btnUpdate'). animate ({width: "toggle"}); // Bouton Masquer
}
Ou plus efficace, mais encore plus laid:
bouton var = $ ('# btnUpdate');
if (button.is (": visible"))
{
button.animate ({width: "toggle"}); // Bouton Masquer
}
Vous pouvez tout faire en une seule ligne:
$ ('# btnUpdate'). filter (": visible"). animate ({width: "toggle"});
|
Le sélecteur: visible selon la documentation jQuery:
Ils ont une valeur d'affichage CSS nulle.
Ce sont des éléments de formulaire avec type = "hidden".
Leur largeur et hauteur sont explicitement définies sur 0.
Un élément ancêtre est masqué, donc l'élément n'apparaît pas sur la page.
Les éléments avec visibilité: masqué ou opacité: 0 sont considérés comme visibles, car ils consomment toujours de l'espace dans la mise en page.
Ceci est utile dans certains cas et inutile dans d'autres, car si vous voulez vérifier si l'élément est visible (affichage! = Aucun), en ignorant la visibilité des parents, vous trouverez que faire .css ("display") == 'aucun 'est non seulement plus rapide, mais renvoie également le contrôle de visibilité correctement.
Si vous voulez vérifier la visibilité au lieu de l'affichage, vous devez utiliser: .css ("visibilité") == "hidden".
Prenez également en compte les notes jQuery supplémentaires:
Parce que: visible est une extension jQuery et ne fait pas partie de la spécification CSS, les requêtes utilisant: visible ne peuvent pas profiter de l'amélioration des performances fournie par la méthode native DOM querySelectorAll (). Pour obtenir les meilleures performances lors de l'utilisation de: visible pour sélectionner des éléments, sélectionnez d'abord les éléments à l'aide d'un sélecteur CSS pur, puis utilisez .filter (": visible").
De plus, si vous êtes préoccupé par les performances, vous devriez cocher Now you see me… show / hide performance (2010-05-04). Et utilisez d'autres méthodes pour afficher et masquer des éléments.
|
Cela fonctionne pour moi, et j'utilise show () et hide () pour rendre mon div masqué / visible:
if ($ (this) .css ('display') == 'none') {
/ * votre code va ici * /
} autre {
/ * logique alternative * /
}
|
Comment fonctionne la visibilité des éléments et jQuery;
Un élément peut être masqué avec affichage: aucun,visibilité: cachée ou opacité: 0. La différence entre ces méthodes:
display: aucun masque l'élément, et il ne prend aucun espace;
visibilité: masqué masque l'élément, mais il prend toujours de la place dans la mise en page;
opacity: 0 masque l'élément en tant que "visibilité: hidden", et il prend toujours de la place dans la mise en page; la seule différence est que l'opacité permet de rendre un élément partiellement transparent;
if ($ ('. target'). is (': hidden')) {
$ ('. cible'). show ();
} autre {
$ ('. cible'). hide ();
}
if ($ ('. target'). is (': visible')) {
$ ('. cible'). hide ();
} autre {
$ ('. cible'). show ();
}
if ($ ('. target-visibilité'). css ('visibilité') == 'hidden') {
$ ('. target-visibilité'). css ({
visibilité: "visible",
afficher: ""
});
} autre {
$ ('. target-visibilité'). css ({
visibilité: "caché",
afficher: ""
});
}
if ($ ('. target-visibilité'). css ('opacity') == "0") {
$ ('. target-visibilité'). css ({
opacité: "1",
afficher: ""
});
} autre {
$ ('. target-visibilité'). css ({
opacité: "0",
afficher: ""
});
}
Méthodes de basculement jQuery utiles:
$ ('. click'). click (function () {
$ ('. target'). toggle ();
});
$ ('. click'). click (function () {
$ ('. target'). slideToggle ();
});
$ ('. click'). click (function () {
$ ('. target'). fadeToggle ();
});
|
Vous pouvez également le faire en utilisant du JavaScript brut:
function isRendered (domObj) {
if ((domObj.nodeType! = 1) || (domObj == document.body)) {
retourne vrai;
}
if (domObj.currentStyle && domObj.currentStyle ["affichage"]! = "aucun" && domObj.currentStyle ["visibilité"]! = "caché") {
return isRendered (domObj.parentNode);
} else if (window.getComputedStyle) {
var cs = document.defaultView.getComputedStyle (domObj, null);
if (cs.getPropertyValue ("display")! = "none" && cs.getPropertyValue ("visibilité")! = "hidden") {
return isRendered (domObj.parentNode);
}
}
retourner faux;
}
Remarques:
Fonctionne partout
Fonctionne pour les éléments imbriqués
Fonctionne pour les styles CSS et en ligne
Ne nécessite pas de cadre
|
J'utiliserais la classe CSS .hide {display: none! Important; }.
Pour masquer / afficher, j'appelle .addClass ("cacher") /. RemoveClass ("cacher"). Pour vérifier la visibilité, j'utilise .hasClass ("hide").
C'est un moyen simple et clair de vérifier / masquer / afficher des éléments, si vous ne prévoyez pas d'utiliser les méthodes .toggle () ou .animate ().
|
Lien de démonstration
$ ('# clickme'). click (function () {
$ ('# book'). toggle ('lent', function () {
// Animation terminée.
alert ($ ('# book'). is (": visible")); // <--- TRUE si visible False si caché
});
});
Cliquez ici
La source:
Blogger Plug n Play - Outils et widgets jQuery: Comment voir si l'élément est masqué ou visible à l'aide de jQuery
|
On peut simplement utiliser l'attribut caché ou visible, comme:
$ ('élément: caché')
$ ('élément: visible')
Ou vous pouvez simplifier la même chose avec est comme suit.
$ (élément) .is (": visible")
|
ebdiv doit être défini sur style = "display: none;". Cela fonctionne à la fois pour afficher et masquer:
$ (document) .ready (fonction () {
$ ("# eb"). cliquez sur (function () {
$ ("# ebdiv"). toggle ();
});
});
|
Une autre réponse à prendre en compte est que si vous masquez un élément, vous devez utiliser jQuery, mais au lieu de le cacher, vous supprimez tout l'élément, mais vous copiez son contenu HTML et la balise elle-même dans une variable jQuery, puis tout ce que vous avez à faire est de tester si une telle balise est présente à l'écran, en utilisant le if normal (! $ ('# thetagname'). length).
|
Lors du test d'un élément contre: hidden selector dans jQuery, il faut considérer qu'un élément positionné absolu peut être reconnu comme caché bien que ses éléments enfants soient visibles.
Cela semble quelque peu contre-intuitif en premier lieu - bien que regarder de plus près la documentation de jQuery donne les informations pertinentes:
Les éléments peuvent être considérés comme cachés pour plusieurs raisons: [...] Leur largeur et leur hauteur sont explicitement définies sur 0. [...]
Donc, cela a du sens en ce qui concerne le modèle de boîte et le style calculé pour l'élément. Même si la largeur et la hauteur ne sont pas définies explicitement sur 0, elles peuvent être définies implicitement.
Jetez un œil à l'exemple suivant:
console.log ($ ('. foo'). is (': hidden')); // vrai
console.log ($ ('. bar'). is (': hidden')); // faux
.foo {
position: absolue;
gauche: 10px;
haut: 10px;
arrière-plan: # ff0000;
}
.bar {
position: absolue;
gauche: 10px;
haut: 10px;
largeur: 20px;
hauteur: 20px;
arrière-plan: # 0000ff;
}
Mise à jour pour jQuery 3.x:
Avec jQuery 3, le comportement décrit va changer! Les éléments seront considérés comme visibles s'ils ont des boîtes de mise en page, y compris celles de largeur et / ou de hauteur nulles.
JSFiddle avec jQuery 3.0.0-alpha1:
http://jsfiddle.net/pM2q3/7/
Le même code JavaScript aura alors cette sortie:
console.log ($ ('. foo'). is (': hidden')); // faux
console.log ($ ('. bar'). is (': hidden'));// faux
|
Cela peut fonctionner:
expect ($ ("# message_div"). css ("affichage")). toBe ("aucun");
|
Exemple:
$ (document) .ready (fonction () {
if ($ ("# checkme: hidden"). length) {
console.log ('Caché');
}
});
|
Pour vérifier s'il n'est pas visible j'utilise!:
if (! $ ('# livre'). is (': visible')) {
alert ('# livre n'est pas visible')
}
Ou ce qui suit est également le sam, en enregistrant le sélecteur jQuery dans une variable pour avoir de meilleures performances lorsque vous en avez besoin plusieurs fois:
var $ livre = $ ('# livre')
if (! $ book.is (': visible')) {
alert ('# livre n'est pas visible')
}
|
Utilisez le basculement de classe, pas l'édition de style. . .
L'utilisation de classes désignées pour «masquer» des éléments est facile et aussi l'une des méthodes les plus efficaces. Activer ou désactiver une classe «masquée» avec un style d'affichage «aucun» sera plus rapide que la modification directe de ce style. J'ai expliqué une partie de cela assez en détail dans la question Stack Overflow: transformer deux éléments visibles / masqués dans le même div.
Meilleures pratiques et optimisation JavaScript
Voici une vidéo vraiment éclairante d'un Google Tech Talk par l'ingénieur front-end de Google Nicholas Zakas:
Accélérez votre Javascript (YouTube)
|
Exemple d'utilisation du contrôle visible pour adblocker est activé:
$ (document) .ready (fonction () {
if (! $ ("# ablockercheck"). is (": visible"))
$ ("# ablockermsg"). text ("Veuillez désactiver l'adblocker."). show ();
});
"ablockercheck" est un identifiant qui bloque l'adblocker. Donc, en le vérifiant s'il est visible, vous pouvez détecter si l'adblocker est activé.
|
Après tout, aucun exemple ne me convient, alors j'ai écrit le mien.
Tests (pas de prise en charge du filtre Internet Explorer: alpha):
a) Vérifiez si le document n'est pas masqué
b) Vérifiez si un élément a une largeur / hauteur / opacité nulle ou affichage: aucun / visibilité: caché dans les styles en ligne
c) Vérifiez si le centre (aussi parce que c'est plus rapide que de tester chaque pixel / coin) de l'élément n'est pas masqué par un autre élément (et tous les ancêtres, exemple: débordement: caché / défilement / un élément sur un autre) ou les bords de l'écran
d) Vérifier si un élément a une largeur / hauteur / opacité nulle ou affichage: aucun / visibilité: caché dans les styles calculés (parmi tous les ancêtres)
Testé sur
Android 4.4 (navigateur natif / Chrome / Firefox), Firefox (Windows / Mac), Chrome (Windows / Mac), Opera (Windows Presto / Mac WebKit), Internet Explorer (modes de document Internet Explorer 5-11 + Internet Explorer 8 sur un machine virtuelle) et Safari (Windows / Mac / iOS).
var is_visible = (fonction () {
var x = window.pageXOffset? window.pageXOffset + window.innerWidth - 1: 0,
y = window.pageYOffset? window.pageYOffset + window.innerHeight - 1: 0,
relative = !! ((! x &&! y) ||! document.elementFromPoint (x, y));
fonction à l'intérieur (enfant, parent) {
while (enfant) {
if (child === parent) return true;
enfant = child.parentNode;
}
retourner faux;
};
fonction de retour (elem) {
si (
document.hidden ||
elem.offsetWidth == 0 ||
elem.offsetHeight == 0 ||
elem.style.visibility == 'caché' ||
elem.style.display == 'aucun' ||
elem.style.opacity === 0
) retourne faux;
var rect = elem.getBoundingClientRect ();
if (relatif) {
if (! inside (document.elementFromPoint (rect.left + elem.offsetWidth / 2, rect.top + elem.offsetHeight / 2), elem)) return false;
} sinon si (
! inside (document.elementFromPoint (rect.left + elem.offsetWidth / 2 + window.pageXOffset, rect.top + elem.offsetHeight / 2 + window.pageYOffset), elem) ||
(
rect.top + elem.offsetHeight / 2 <0 ||
rect.left + elem.offsetWidth / 2 <0 ||
rect.bottom - elem.offsetHeight / 2> (window.innerHeight || document.documentElement.clientHeight) ||
rect.right - elem.offsetWidth / 2> (window.innerWidth || document.documentElement.clientWidth)
)
) retourne faux;
if (window.getComputedStyle || elem.currentStyle) {
var el = elem,
comp = nul;
while (el) {
if (el === document) {break;} else if (! el.parentNode) return false;
comp = window.getComputedStyle? window.getComputedStyle (el, null): el.currentStyle;
if (comp && (comp.visibility == 'hidden' || comp.display == 'none' || (typeof comp.opacity! == 'undefined' && comp.opacity! = 1))) return false;
el = el.parentNode;
}
}
retourne vrai;
}
}) ();
Comment utiliser:
is_visible (elem) // booléen
|
Vous devez vérifier à la fois ... Affichage et visibilité:
if ($ (this) .css ("display") == "none" || $ (this) .css ("visibilité") == "hidden") {
// L'élément n'est pas visible
} autre {
// L'élément est visible
}
Si nous vérifions $ (this) .is (": visible"), jQuery vérifie automatiquement les deux choses.
|
Peut-être que tu peux faire quelque chose comme ça
$ (document) .ready (fonction () {
var visible =$ ('# tElement'). is (': visible');
if (visible) {
alerte ("visible");
// Code
}
autre
{
alerte ("caché");
}
});
Prénom
|
Vérifiez simplement la visibilité en recherchant une valeur booléenne, comme:
if (this.hidden === false) {
// Votre code
}
J'ai utilisé ce code pour chaque fonction. Sinon, vous pouvez utiliser is (': visible') pour vérifier la visibilité d'un élément.
|
Parce que les éléments avec visibilité: caché ou opacité: 0 sont considérés comme visibles, car ils consomment toujours de l'espace dans la mise en page (comme décrit pour jQuery: sélecteur visible) - nous pouvons vérifier si l'élément est vraiment visible de cette manière:
function isElementReallyHidden (el) {
retourne $ (el) .is (": caché") || $ (el) .css ("visibilité") == "caché" || $ (el) .css ('opacité') == 0;
}
var booElementReallyShowed =! isElementReallyHidden (someEl);
$ (someEl) .parents (). each (function () {
if (isElementReallyHidden (this)) {
booElementReallyShowed = false;
}
});
|
Mais que faire si le CSS de l'élément est comme le suivant?
.élément{
position: absolue; gauche: -9999;
}
Donc, cette réponse à la question de Stack Overflow Comment vérifier si un élément est hors écran doit également être prise en compte.
|
Une fonction peut être créée afin de vérifier les attributs de visibilité / d'affichage afin de déterminer si l'élément est affiché ou non dans l'interface utilisateur.
function checkUIElementVisible (élément) {
return ((element.css ('affichage')! == 'aucun') && (element.css ('visibilité')! == 'caché'));
}
Violon de travail
|
Voici également une expression conditionnelle ternaire pour vérifier l'état de l'élément, puis pour le basculer:
$ ('someElement'). on ('click', function () {$ ('elementToToggle'). is (': visible')? $ ('elementToToggle'). hide ('slow'): $ ('elementToToggle ') .show (' lent ');});
|
if ($ ('# postcode_div'). is (': visible')) {
if ($ ('# postcode_text'). val () == '') {
$ ('# spanPost'). text ('\ u00a0');
} autre {
$ ('# spanPost'). text ($ ('# postcode_text'). val ());
}
|
1
2
Prochain
Question très active. Gagnez 10 points de réputation pour répondre à cette question. L'exigence de réputation permet de protéger cette question contre les spams et les activités sans réponse.
Ce n'est pas la réponse que vous recherchez? Parcourez les autres questions marquées visibilité javascript jquery dom ou posez votre propre question.
La source:
Blogger Plug n Play - Outils et widgets jQuery: Comment voir si l'élément est masqué ou visible à l'aide de jQuery
|
On peut simplement utiliser l'attribut caché ou visible, comme:
$ ('élément: caché')
$ ('élément: visible')
Ou vous pouvez simplifier la même chose avec est comme suit.
$ (élément) .is (": visible")
|
ebdiv doit être défini sur style = "display: none;". Cela fonctionne à la fois pour afficher et masquer:
$ (document) .ready (fonction () {
$ ("# eb"). cliquez sur (function () {
$ ("# ebdiv"). toggle ();
});
});
|
Une autre réponse à prendre en compte est que si vous masquez un élément, vous devez utiliser jQuery, mais au lieu de le cacher, vous supprimez tout l'élément, mais vous copiez son contenu HTML et la balise elle-même dans une variable jQuery, puis tout ce que vous avez à faire est de tester si une telle balise est présente à l'écran, en utilisant le if normal (! $ ('# thetagname'). length).
|
Lors du test d'un élément contre: hidden selector dans jQuery, il faut considérer qu'un élément positionné absolu peut être reconnu comme caché bien que ses éléments enfants soient visibles.
Cela semble quelque peu contre-intuitif en premier lieu - bien que regarder de plus près la documentation de jQuery donne les informations pertinentes:
Les éléments peuvent être considérés comme cachés pour plusieurs raisons: [...] Leur largeur et leur hauteur sont explicitement définies sur 0. [...]
Donc, cela a du sens en ce qui concerne le modèle de boîte et le style calculé pour l'élément. Même si la largeur et la hauteur ne sont pas définies explicitement sur 0, elles peuvent être définies implicitement.
Jetez un œil à l'exemple suivant:
console.log ($ ('. foo'). is (': hidden')); // vrai
console.log ($ ('. bar'). is (': hidden')); // faux
.foo {
position: absolue;
gauche: 10px;
haut: 10px;
arrière-plan: # ff0000;
}
.bar {
position: absolue;
gauche: 10px;
haut: 10px;
largeur: 20px;
hauteur: 20px;
arrière-plan: # 0000ff;
}
Mise à jour pour jQuery 3.x:
Avec jQuery 3, le comportement décrit va changer! Les éléments seront considérés comme visibles s'ils ont des boîtes de mise en page, y compris celles de largeur et / ou de hauteur nulles.
JSFiddle avec jQuery 3.0.0-alpha1:
http://jsfiddle.net/pM2q3/7/
Le même code JavaScript aura alors cette sortie:
console.log ($ ('. foo'). is (': hidden')); // faux
console.log ($ ('. bar'). is (': hidden'));// faux
|
Cela peut fonctionner:
expect ($ ("# message_div"). css ("affichage")). toBe ("aucun");
|
Exemple:
$ (document) .ready (fonction () {
if ($ ("# checkme: hidden"). length) {
console.log ('Caché');
}
});
|
Pour vérifier s'il n'est pas visible j'utilise!:
if (! $ ('# livre'). is (': visible')) {
alert ('# livre n'est pas visible')
}
Ou ce qui suit est également le sam, en enregistrant le sélecteur jQuery dans une variable pour avoir de meilleures performances lorsque vous en avez besoin plusieurs fois:
var $ livre = $ ('# livre')
if (! $ book.is (': visible')) {
alert ('# livre n'est pas visible')
}
|
Utilisez le basculement de classe, pas l'édition de style. . .
L'utilisation de classes désignées pour «masquer» des éléments est facile et aussi l'une des méthodes les plus efficaces. Activer ou désactiver une classe «masquée» avec un style d'affichage «aucun» sera plus rapide que la modification directe de ce style. J'ai expliqué une partie de cela assez en détail dans la question Stack Overflow: transformer deux éléments visibles / masqués dans le même div.
Meilleures pratiques et optimisation JavaScript
Voici une vidéo vraiment éclairante d'un Google Tech Talk par l'ingénieur front-end de Google Nicholas Zakas:
Accélérez votre Javascript (YouTube)
|
Exemple d'utilisation du contrôle visible pour adblocker est activé:
$ (document) .ready (fonction () {
if (! $ ("# ablockercheck"). is (": visible"))
$ ("# ablockermsg"). text ("Veuillez désactiver l'adblocker."). show ();
});
"ablockercheck" est un identifiant qui bloque l'adblocker. Donc, en le vérifiant s'il est visible, vous pouvez détecter si l'adblocker est activé.
|
Après tout, aucun exemple ne me convient, alors j'ai écrit le mien.
Tests (pas de prise en charge du filtre Internet Explorer: alpha):
a) Vérifiez si le document n'est pas masqué
b) Vérifiez si un élément a une largeur / hauteur / opacité nulle ou affichage: aucun / visibilité: caché dans les styles en ligne
c) Vérifiez si le centre (aussi parce que c'est plus rapide que de tester chaque pixel / coin) de l'élément n'est pas masqué par un autre élément (et tous les ancêtres, exemple: débordement: caché / défilement / un élément sur un autre) ou les bords de l'écran
d) Vérifier si un élément a une largeur / hauteur / opacité nulle ou affichage: aucun / visibilité: caché dans les styles calculés (parmi tous les ancêtres)
Testé sur
Android 4.4 (navigateur natif / Chrome / Firefox), Firefox (Windows / Mac), Chrome (Windows / Mac), Opera (Windows Presto / Mac WebKit), Internet Explorer (modes de document Internet Explorer 5-11 + Internet Explorer 8 sur un machine virtuelle) et Safari (Windows / Mac / iOS).
var is_visible = (fonction () {
var x = window.pageXOffset? window.pageXOffset + window.innerWidth - 1: 0,
y = window.pageYOffset? window.pageYOffset + window.innerHeight - 1: 0,
relative = !! ((! x &&! y) ||! document.elementFromPoint (x, y));
fonction à l'intérieur (enfant, parent) {
while (enfant) {
if (child === parent) return true;
enfant = child.parentNode;
}
retourner faux;
};
fonction de retour (elem) {
si (
document.hidden ||
elem.offsetWidth == 0 ||
elem.offsetHeight == 0 ||
elem.style.visibility == 'caché' ||
elem.style.display == 'aucun' ||
elem.style.opacity === 0
) retourne faux;
var rect = elem.getBoundingClientRect ();
if (relatif) {
if (! inside (document.elementFromPoint (rect.left + elem.offsetWidth / 2, rect.top + elem.offsetHeight / 2), elem)) return false;
} sinon si (
! inside (document.elementFromPoint (rect.left + elem.offsetWidth / 2 + window.pageXOffset, rect.top + elem.offsetHeight / 2 + window.pageYOffset), elem) ||
(
rect.top + elem.offsetHeight / 2 <0 ||
rect.left + elem.offsetWidth / 2 <0 ||
rect.bottom - elem.offsetHeight / 2> (window.innerHeight || document.documentElement.clientHeight) ||
rect.right - elem.offsetWidth / 2> (window.innerWidth || document.documentElement.clientWidth)
)
) retourne faux;
if (window.getComputedStyle || elem.currentStyle) {
var el = elem,
comp = nul;
while (el) {
if (el === document) {break;} else if (! el.parentNode) return false;
comp = window.getComputedStyle? window.getComputedStyle (el, null): el.currentStyle;
if (comp && (comp.visibility == 'hidden' || comp.display == 'none' || (typeof comp.opacity! == 'undefined' && comp.opacity! = 1))) return false;
el = el.parentNode;
}
}
retourne vrai;
}
}) ();
Comment utiliser:
is_visible (elem) // booléen
|
Vous devez vérifier à la fois ... Affichage et visibilité:
if ($ (this) .css ("display") == "none" || $ (this) .css ("visibilité") == "hidden") {
// L'élément n'est pas visible
} autre {
// L'élément est visible
}
Si nous vérifions $ (this) .is (": visible"), jQuery vérifie automatiquement les deux choses.
|
Peut-être que tu peux faire quelque chose comme ça
$ (document) .ready (fonction () {
var visible =$ ('# tElement'). is (': visible');
if (visible) {
alerte ("visible");
// Code
}
autre
{
alerte ("caché");
}
});
Prénom
|
Vérifiez simplement la visibilité en recherchant une valeur booléenne, comme:
if (this.hidden === false) {
// Votre code
}
J'ai utilisé ce code pour chaque fonction. Sinon, vous pouvez utiliser is (': visible') pour vérifier la visibilité d'un élément.
|
Parce que les éléments avec visibilité: caché ou opacité: 0 sont considérés comme visibles, car ils consomment toujours de l'espace dans la mise en page (comme décrit pour jQuery: sélecteur visible) - nous pouvons vérifier si l'élément est vraiment visible de cette manière:
function isElementReallyHidden (el) {
retourne $ (el) .is (": caché") || $ (el) .css ("visibilité") == "caché" || $ (el) .css ('opacité') == 0;
}
var booElementReallyShowed =! isElementReallyHidden (someEl);
$ (someEl) .parents (). each (function () {
if (isElementReallyHidden (this)) {
booElementReallyShowed = false;
}
});
|
Mais que faire si le CSS de l'élément est comme le suivant?
.élément{
position: absolue; gauche: -9999;
}
Donc, cette réponse à la question de Stack Overflow Comment vérifier si un élément est hors écran doit également être prise en compte.
|
Une fonction peut être créée afin de vérifier les attributs de visibilité / d'affichage afin de déterminer si l'élément est affiché ou non dans l'interface utilisateur.
function checkUIElementVisible (élément) {
return ((element.css ('affichage')! == 'aucun') && (element.css ('visibilité')! == 'caché'));
}
Violon de travail
|
Voici également une expression conditionnelle ternaire pour vérifier l'état de l'élément, puis pour le basculer:
$ ('someElement'). on ('click', function () {$ ('elementToToggle'). is (': visible')? $ ('elementToToggle'). hide ('slow'): $ ('elementToToggle ') .show (' lent ');});
|
if ($ ('# postcode_div'). is (': visible')) {
if ($ ('# postcode_text'). val () == '') {
$ ('# spanPost'). text ('\ u00a0');
} autre {
$ ('# spanPost'). text ($ ('# postcode_text'). val ());
}
|
1
2
Prochain
Question très active. Gagnez 10 points de réputation pour répondre à cette question. L'exigence de réputation permet de protéger cette question contre les spams et les activités sans réponse.
Ce n'est pas la réponse que vous recherchez? Parcourez les autres questions marquées visibilité javascript jquery dom ou posez votre propre question.